<template>
  <div class="tablescreencontainer">
    <div class="tablescreentitle contentpadding">
      <div>&nbsp;表格表头设置</div>
      <div @click="cancel" style="font-size: 20px;margin-top: 8px;" class="el-icon-close">
        <!-- <i class="el-icon-close"></i> -->

      </div>
    </div>
    <div class="tablescreencontent">
      <table>
        <tr>
          <td class="contentpadding" width="514px">可选表头</td>
          <td class="contentpadding" width="160px">当前显示表头</td>
        </tr>
        <tr>
          <td class="tableleftcontent" width="514px">
            <div class="tableleftcontentdiv">
              <div>
                <div style="font-size: 13px; margin-bottom: 10px">基础标题</div>
                <div>
                  <!--                  <el-row :gutter="20">
                    <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
                    <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
                    <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
                    <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
                  </el-row> -->

                  <el-checkbox-group v-model="checkedCities">
                    <el-row>
                      <!-- 禁用的 -->
                      <el-col v-for="des in checkList" :key="des" :span="6">
                        <el-checkbox disabled checked="true" :label="des">
                          {{ des }}
                        </el-checkbox>
                      </el-col>
                      <!-- 可选的 -->
                      <el-col v-if="checkList.indexOf(res) === -1" v-for="res in checkListAll" :key="res" :span="6">
                        <el-checkbox :checked="cities.indexOf(res)!==-1" :label="res">
                          {{ res }}
                        </el-checkbox>
                      </el-col>
                      <!-- <el-col v-for="city in cities" :key="city" :span="6">
                        <el-checkbox :checked="" :label="city">{{ city }}</el-checkbox>
                      </el-col> -->
                    </el-row>
                  </el-checkbox-group>
                </div>
              </div>
              <div></div>
            </div>
          </td>
          <td class="contentpadding tablerightcontent" width="160px">

            <div class="tablerightcontentdiv">
              <div
                v-for="(r, index) in checkList"
                :key="index"
                class="tablerightcontentdiv_disableddrag"
              >
                {{ r }}
              </div>
              <div class="textdrog">
                <div
                  v-for="(res, index) in checkedCities"
                  :key="index"
                  class="tablerightcontentdiv_drag"
                  @mousemove="entryscreen"
                >
                  <div v-if="-1 === checkList.indexOf(res)">
                    <div class="el-icon-rank">{{ res }}</div>
                    <div @click="delcheck(res)">
                      <i class="el-icon-close"></i>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </td>
        </tr>
      </table>
    </div>
    <div class="tablebottom">
      <el-button @click="cancel">取消</el-button>
      <el-button type="success" @click="btnsubmit">确定</el-button>
    </div>
  </div>
</template>

<script>
  import Sortable from 'sortablejs'
  export default {
    props: ['dis', 'checked', 'checks'],
    data() {
      return {
        // 禁用变量
        checkList: [],
        // 最终选中变量
        checkedCities: [],
        // 选中变量
        cities: [],
        checkListAll:[],
      }
    },
    computed: {},
    mounted() {
      this.checkListAll = this.checks
      this.checkList = this.dis
      this.cities = this.checked
      if (this.checked.length >= 1) {
          this.checkedCities.concat(this.checkList).concat(this.checked)
      } else {
          this.checkedCities.concat(this.checkList)

      }
      // function delrepetition(arr) {
      //   console.log(arr)
      //   return Array.from(new Set(arr))
      // }
      var el = document.querySelector('.textdrog')
      //设置配置
      var ops = {
        animation: 100,
        //拖动结束
        // onEnd: function (evt) {
        //     console.log(evt);
        // },
      }
      //初始化
      Sortable.create(el, ops)
    },
    methods: {
      entryscreen($event) {
        $event.currentTarget.className =
          'tablerightcontentdiv_drag tablerightcontentdiv_active'
      },
      delcheck(res) {
        console.log(res)
        this.checkedCities = this.checkedCities.filter((r) => r !== res)
        // console.log(this.checkedCities)
        // alert(res)
        //子传父，传递隐藏popup的方法。
      },
      btnsubmit() {
        this.$emit('gettabletop', this.checkedCities)
      },
      cancel(){
        this.$emit('gettabletop', "取消")
      }
    },
  }
</script>

<style>
  .contentpadding {
    padding: 0 26px;
  }

  .tablescreencontainer {
    width: 850px;
    height: 420px;
    box-shadow: 0px 0px 10px #8b8b8b;
    background-color: #ffffff;
    display: block;
  }

  .tablescreentitle {
    width: 100%;
    line-height: 40px;
    display: flex;
    justify-content: space-between;
  }

  .tablescreentitle div:first-child {
    color: rgb(51, 51, 51);
    font-size: 14px;
    /* background-color: #000000; */
    font-weight: 700;
  }

  .tablescreentitle div:first-child::before {
    content: '.';
    width: 4px;
    color: #000000;
    height: 10px;
    background-color: #000000;
  }

  table {
    width: 100%;
    border-collapse: collapse;
  }

  .tablescreencontent tr:first-child {
    width: 100%;
    background-color: rgba(246, 248, 249, 0.5);
    line-height: 34.4px;
    height: 34.4;
    font-size: 13px;
    font-weight: 700;
    /* background-color: #1386D2; */
  }

  .tablescreencontent td {
    border: 1px solid #e8e8e8;
  }

  .tableleftcontent {
    height: 290px;
    padding: 8px 26px;
    width: 514px;
    overflow: auto;
  }

  .tablerightcontent {
    height: 290px;
    padding: 8px 0px;
  }

  .tableleftcontentdiv {
    height: 100%;
    width: 514px;
    overflow: auto;
  }

  .tablerightcontentdiv {
    height: 100%;
    width: 100%;
    overflow: auto;
  }
  .tablerightcontentdiv_active:hover {
    /* 19, 206, 102 */
    background-color: #e8f4ff;
    color: #333333;
  }
  .tablerightcontentdiv_drag {
    cursor: move;
    line-height: 22px;
    width: 100%;
  }
  .tablerightcontentdiv_drag div {
    display: flex;
    line-height: 22px;
    padding: 0 2px;
    justify-content: space-between;
  }
  .tablerightcontentdiv_drag div i {
    display: block;
    margin-top: 4px;
  }
  .tablerightcontentdiv_disableddrag::before {
    box-sizing: border-box;
    content: '';
    display: inline-block;
    height: 0px;
    overflow-wrap: break-word;
    width: 13px;
  }
  .tablerightcontentdiv_disableddrag {
    cursor: not-allowed;
    line-height: 22px;
  }

  .el-icon-close {
    cursor: default;
  }

  .el-icon-rank::before {
    margin-right: 3px;
  }

  .tablebottom {
    text-align: right;
    margin-top: 15px;
    margin-right: 40px;
  }
</style>
